<template>
	<view class="tabs">
		<scroll-view 
			:scroll-x="true" 
			id="tab-bar" 
			class="scroll-h" 
			:show-scrollbar="false"
			style="display: flex; justify-content: space-evenly;"
			>
			<view v-for="(item,index) in tabBars" 
			class="uni-tab-item" 
			:class="[{'active':index==tabBarsIndex}]"
				:key="item.id" 
				@click="switchTabbar($event,index)" :style="itemStyle">
				 <text class="uni-tab-item-title">{{item.classname}} {{item.num?item.num:''}}</text>
			</view>
			<view class="line-h" :style="{bottom:line.bottom,
				left:line.left,
				width:line.width,
				height:line.height}"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const props = defineProps({
		tabBars: {
			type: Array,
			require: true
		},
		tabBarsIndex: {
			type: Number,
			default: 0,
		},
		itemStyle:{
			type:Object,
			default:{},
		}
		
	})
	const emits = defineEmits(["update:tabBarsIndex"])
	const line = reactive({
					bottom: "0upx",
					left: "34upx",
					width: "60upx",
					height: "6upx",
				});
	function switchTabbar(e, index) {
		let dom = uni.createSelectorQuery();
		emits("update:tabBarsIndex",index)
		dom.select("#tab-bar").fields({
			scrollOffset:true
		}).exec(res1=>{
			dom.selectAll(".uni-tab-item").fields({
					size: true,
					rect:true,
					scrollOffset:true,
				},
				(res) => {
					line.width = res[props.tabBarsIndex].width + "px";
					line.left =res1[0].scrollLeft+res[props.tabBarsIndex].left + "px";
				}).exec(res => {})
		})
	
	
	}
	defineExpose({switchTabbar})
</script>

<style scoped lang="scss">
	
	.tabs {
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifndef APP-PLUS */
		height: 100vh;
		/* #endif */
	}




	.scroll-h {
		position: relative;
		width: 750upx;
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		border-bottom: 1upx solid #ccc;
	}

	.uni-tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		margin-left: 34rpx;
		margin-right: 34rpx;
	}
	

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item.active {
		font-weight: bold;
		color: #eb4d4b;
	}

	.line-h {
		position: absolute;
		background-color: #e74c3c;
		transition: all .3s linear;
	}
</style>
